<%@ page language="java" contentType="text/html; utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>查看所有文章</title>

    <link href="../layui/css/layui.css" type="text/css" rel="stylesheet">
    <%--layui设置table行高度的方法--%>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
    <script src="../layui/layui.js" type="text/javascript"></script>

    <script type="text/javascript">

        /**/
        $.ajax({
            url: "${pageContext.request.contextPath}/guru/selectAllGuruNick",
            success: function (data) {
                 $("#guruId").html("<option value=\"\">请选择文章作者</option>")
                 for (var i = 0; i < data.length; i++) {
                     // console.log(data[i].guruNickName)
                     // console.log(data[i].guruId)
                     $("#guruId").append("<option value=\"" + data[i].guruId + "\">" + data[i].guruNickName + "</option>");
                 }
            }
        })

        layui.use('table', function () {
            var table = layui.table;
            //执行一个laypage实例
            table.render({
                elem: "#myTable",//写id选择器
                //SpringBoot中直接请求showall,在SpringMVC中请求showall.do
                url: "${pageContext.request.contextPath}/article/listArticle",//数据接口，请求的地址
                width: 1230,
                page: true,//开启分页

                //开启table表格头部的工具栏区域
                toolbar: '#myToolbar',//id选择器

                //列
                cols: [[
                    {type: "checkbox"},
                    {title: "编号", field: "articleId"},
                    {title: "图片", field: "articleImage",templet: "#img"},
                    {title: "作者", templet: "#author"},
                    {title: "文章名称", field: "articleName"},
                    {title: "文章内容", field: "articleContent"},
                    {title: "发布日期", field: "articleDate"},
                    {title: "操作", templet: "#caozuo"}

                ]]
            });
        });

        /*------layui.use开始 表单验证-----*/
        layui.use(['form', 'table'], function () {
            var form = layui.form;
            var table = layui.table;

            //当点击提交按钮的时候，会进入到这个函数
            //当所有的验证都通过时，才会进入到这个函数
            //--------------------add-----------
            form.on("submit(add)", function (data) {
                console.log("------1----" + data);
                //FormData不是jQuery对象，是浏览器的对象
                var addForm = new FormData(document.getElementById("addForm"));
                $.ajax({
                    url: "${pageContext.request.contextPath}/article/insertArticle",
                    //data:data.field  获取表格中的所有数据
                    data: addForm,
                    type: "post",
                    cache: false,//禁止缓存
                    contentType: false,//不要设置头信息
                    processData: false,
                    async: false,
                    success: function (data) {
                        //console.log(data)
                        //1.关闭掉添加弹出层
                        layer.closeAll('page');

                        //2.提示添加成功
                        if (data.insertArticle) {
                            layer.alert("添加成功", {time: 2000});
                        } else {
                            layer.alert("添加失败", {time: 2000});
                        }

                        //3.刷新table
                        table.reload("myTable");


                    }
                });
                return false;//阻止跳转；
            })
            //-------update----------
            //3.表单验证 见上面
            //4.把修改后的数据通过ajax请求响应到页面中...关闭弹出层，提示修改信息，刷新table表格
            form.on("submit(update)", function (data) {
                console.log("------1----" + data);
                //FormData不是jQuery对象，是浏览器的对象
                var addForm = new FormData(document.getElementById("addForm"));

                $.ajax({
                    url: "${pageContext.request.contextPath}/article/updateArticle",
                    data: addForm,
                    type: "post",
                    cache: false,//禁止缓存
                    contentType: false,//不要设置头信息
                    processData: false,
                    async: false,
                    success: function (data) {
                        console.log(data)
                        //1.关闭掉修改弹出层
                        layer.closeAll('page');

                        //2.提示添修改成功
                        if (data.updateArticle) {
                            layer.alert("修改成功", {time: 2000});
                        } else {
                            layer.alert("修改失败", {time: 2000});
                        }

                        //3.刷新table
                        table.reload("myTable");


                    }
                });
                return false;//阻止跳转；
            })
            /*-----update结束-------*/

        })
        /*------layui.use结束-----*/


        //搜索操作
        function doSearch() {
            //1.得到input输入框中的值
            var articleName = $("#articleName").val();
            //2.发送请求，接受数据
            //使用table模块
            layui.use('table', function () {
                var table = layui.table;
                //reload方法完成数据的重新加载
                table.reload("myTable", {
                    where: {"name": articleName}//发送的额外参数
                })
            })
        }


        //打开添加弹出框
        //发布文章到哪一位上师的下面，要指定上师的id
        function toOpenAddLayer() {

            $("#updateSubmitBtn").hide();
            /*那输入框中的内容置空*/
            $("#addForm")[0].reset();
            $("#addSubmitBtn").show();
            $("#hiddenAuthor").show();
            /*添加文章的页面先发送ajax请求去查询所有上师的法号*/
            /*$.ajax({
                url: "/guru/selectAllGuruNick",
                success: function (data) {

                    $("#guruId").html("<option value=\"\">请选择文章作者</option>")
                    for (var i = 0; i < data.length; i++) {
                        console.log(data[i].guruNickName)
                        console.log(data[i].guruId)
                        $("#guruId").append("<option value=\"" + data[i].guruId + "\">" + data[i].guruNickName + "</option>");
                    }
                    layui.form.render(); //更新全部
                }
            })*/
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: "添加文章图片",
                    content: $("#addForm"),
                    area: ['500px', '500px'],
                    type: 1,
                    maxmin: true
                });
            });
        }

        //修改操作 点击修改的按钮，去执行修改相应的方法
        function toOpenUpdateLayer(id) {
            // alert(id);
            /*1.获取当前行数据--通过ajax向后发送请求，获取当前行数据
            2.把数据填充到修改弹出层中--弹出层显示
            3.表单验证
            4.把修改后的数据通过ajax请求响应到页面中...关闭弹出层，提示修改信息，刷新table表格
            * */
            //1
            /*修改的时候不需要改作者，隐藏修改作者的表单*/
            $("#hiddenAuthor").hide();
            $.ajax({
                url: "${pageContext.request.contextPath}/article/selectArtById",
                data: "id=" + id,
                success: function (data) {
                    console.log("----")
                   console.log(data)
                    $("#artId").val(data.selectArtById.articleId);
                    $("#artName").val(data.selectArtById.articleName);
                    $("#artContent").val(data.selectArtById.articleContent);

                    /*$("#guruId").html("")
                    for (var i = 0; i < data.listGuruNick.length; i++) {
                        console.log(data.listGuruNick[i].guruNickName)
                        console.log(data.listGuruNick[i].guruId)
                        $("#guruId").append("<option value=\"" + data.listGuruNick[i].guruId + "\">" + data.listGuruNick[i].guruNickName + "</option>");
                    }*/

                    $(".img0").prop("src",data.selectArtById.articleImage);

                    layui.form.render(); //更新全部
                }
            })
            $("#addSubmitBtn").hide();
            $("#updateSubmitBtn").show();
            //2
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: "修改文章",
                    content: $("#addForm"),
                    type: 1,
                    maxmin: true
                });
            });
        }


        //删除一个轮播图对象
        function deleteOne(id) {
            // alert(id);
            layui.use("table", function () {
                //获取table,用于下面重新加载表格信息，也即是刷新
                var table = layui.table;

                if (confirm("确认要删除吗？")) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/article/deleteArticle",
                        data: "id=" + id,
                        success: function (data) {
                            alert("删除成功！");
                            table.reload("myTable");
                        }
                    })
                }
            })
        }



        /*上传图片回显开始*/
        $(function () {
            $(".file0").change(function () {
                var objUrl = getObjectURL(this.files[0]);
                console.log("objUrl = " + objUrl);
                if (objUrl) {
                    $(".img0").attr("src", objUrl);
                }
            });
        })

        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

        /*上传图片回显结束*/


    </script>


    <script type="text/html" id="caozuo">
        <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal" onclick="toOpenUpdateLayer('{{d.articleId}}')">
            修改
        </button>
        <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-danger" onclick="deleteOne('{{d.articleId}}')">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </script>

    <%--添加展示所有的图片路径--%>
    <script type="text/html" id="img">
        <img src="{{d.articleImage}}" style="height: 35px;width: 35px;"/>
    </script>

    <%--添加展示所有的图片路径--%>
    <script type="text/html" id="author">
        {{d.guru.guruNickName}}
    </script>


</head>

<body>
    <%--table表格放在body最上面--%>
    <table id="myTable"></table>

    <%--templet选择器--%>
    <div id="myToolbar" style="display: none">
        <%--发布，也就是添加拍卖品--%>
        <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal" onclick="toOpenAddLayer()">
            <i class="layui-icon">&#xe608;</i> 发布
        </button>
        <%--组装行内表单--%>
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 200px;">
                <input type="text" class="layui-input" placeholder="请输入文章名称" id="articleName">
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal" onclick="doSearch()">
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
             </div>
        </div>
    </div>



    <%--模态框开始--%>
    <form class="layui-form" id="addForm" style="display:none" method="post" enctype="multipart/form-data">
        <input type="hidden" readonly name="articleId" id="artId"  autocomplete="off" class="layui-input" />
        <div class="layui-form-item">
            <label class="layui-form-label">文章名称</label>
            <div class="layui-input-block">
                <input type="text" name="articleName" id="artName" placeholder="请输入文章名称" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item" id="hiddenAuthor">
            <label class="layui-form-label">选择文章作者</label>
            <div class="layui-input-block">
                <select name="guruId" id="guruId">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文章内容</label>
            <div class="layui-input-block">
                <input type="text" name="articleContent" id="artContent" placeholder="请输入文章内容" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择图片</label>
            <div class="layui-input-block">
                <%--name属性值和controller类的方法内传过来的形参名保持一致--%>
                <input type="file" name="imageUrl" class="file0" id="imageUrl0" placeholder="请选择文章图片" autocomplete="off"
                       class="layui-input"
                       lay-verify="required|bannerImageUrl"/>
                <img src="" class="img0" style="width: 35px;height: 35px;"/>
            </div>
        </div>

        <div class="layui-btn-group">
            <button class="layui-btn" lay-submit lay-filter="add" id="addSubmitBtn">添加</button>
            <button class="layui-btn" lay-submit lay-filter="update" id="updateSubmitBtn">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

    </form>
    <%--模态框结束--%>

</body>
</html>
